<template>
  <div
    class="cooperation"
    id="cooperationContent"
  >
    <div class="content">
      <div class="title">
        <p class="title-p">合作案例</p>
      </div>
      <div class="text">
        <p class="text-p">三汇人力资源集团自成立以来，服务企业100余家，输送员工超过100万人次，覆盖高校300+，我们了解求职者与企业的真正需求。</p>
      </div>
      <div class="img-list">
        <div
          class="item"
          v-for="item in list"
          :key="item.caseId"
          @click="getCaseId(item.caseId)"
        >
          <div class="item-img">
            <img
              :src="item.image"
              width="100%"
              height="100%"
            >
            <div class="item-text">
              <p class="item-text-p">{{ item.company }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    caseList: Array
  },
  data() {
    return {
      list: []
    }
  },
  mounted() {
  },
  methods: {
    getCaseId(id) {
      this.$router.push({
        path: "/Cooperative",
        query: {
          id: id
        }
      });
    }
  },
  watch: {
    caseList(n) {
      this.list = n.filter((v, index) => index < 6);
    }
  }
}
</script>
<style scoped lang="scss">
.cooperation {
  width: 100%;
  height: 700px;
  background: rgba(0, 0, 0, 0.03);
  .content {
    width: 1200px;
    height: 700px;
    margin: 20px auto;  
    .title {
      width: 100%;
      height: 40px;
      padding-top:60px;
      .title-p {
        font-size: 32px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: rgba(0, 0, 0, 1);
        line-height: 45px;
        text-align: center;
      }
    }
    .text {
      width: 100%;
      margin-top: 30px;
      .text-p {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.4);
        line-height: 27px;
        text-align: center;
      }
    }
    .img-list {
      width: 100%;
      height: 400px;
      margin-top: 20px;
    }
    .item {
      width: 360px;
      float: left;
      height: 240px;
      margin-right: 40px;
      margin-top: 20px;
      &:nth-of-type(3n){
        margin-right: 0;
      }
      .item-img {
        width: 100%;
        height: 240px;
        position: relative;
        img{
          object-fit: cover;
          width:100%;
          height:100%;
        }
        .item-text {
          cursor: pointer;
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 40px;
          background: rgba(0, 0, 0, 0.45);
          .item-text-p {
            font-size: 14px;
            line-height: 40px;
            color: #fff;
            text-align: center;
          }
        }
      }
    }
  }
}
@media screen and (max-width: 800px) {
  .cooperation{
    height:auto;
    overflow: hidden;
    .content{
      width:100%;
      height:auto;
      overflow: hidden;
      .title{
        padding-top:0;
        height:auto;
        font-size:1.2rem;
        p.title-p{
          font-size:1.2rem; 
        }
      }
      .text{
        margin-top:0px;
        .text-p{
          font-size:0.7rem;
          line-height: 1.5;
          box-sizing: border-box;
          padding:0 15px;
        }
      }
      .img-list{
        margin-top:0;
        .item{
          width:100%;
          margin-top:15px;
          box-sizing: border-box;
          padding:0 15px;
        }
      }
    }
  }
}
</style>
